<template>
  <!-- 所有页面的头部渐变色 -->
  <view class="layout">
    
    <view class="navbar">
      <view class="statusBar" :style="{height: getstatusBarHeight() + 'px'}"></view>
      <view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
            <view class="title">{{title}}</view>
            <view class="search">
                  <uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
                  <text class="text">搜索</text>
            </view> 
      </view>
    </view>
    
    <view class="fill" :style="{height:GetNavBarHeight()+'px'}">
      
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {getstatusBarHeight,getTitleBarHeight,GetNavBarHeight} from '../../utils/system.js'

defineProps({
  title:{
    type:String,
    default:'壁纸'
  }
})
</script>

<style lang="scss" scoped>
.layout{
  .navbar{
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 999;
     background:
     linear-gradient(to bottom,rgba(0,0,0,0),#fff 500rpx),
     linear-gradient(to right,#beecd8 20%,#f4e2d8 ) 
     ;
    .statusBar{}
    .titleBar{
      display: flex;
      padding: 0 30rpx;
      align-items: center;
     
      .title{
          font-size: 22px;
          font-weight: 700;
          color: #000;
      }
      .search{
          width: 220rpx;
          height: 50rpx;
          border-radius: 60rpx;
          background-color: rgba(255,255,255,0.4);
          border: 1rpx solid #fff;
          margin-left: 30rpx;
          color: #999;
          font-size: 28rpx;
          display: flex;
          align-items: center;
              .text{
                padding-left: 10rpx;
                
              }
              .icon{
                margin-left: 5rpx;
              }
      }
    }
  }
  
  .fill{
    
  }
}
</style>